<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<!--顶部导航栏-->
<div th:replace="~{commons/common_user::topNavigationBar(action='category')}"></div>


<!-- banner 图-->
<div style="margin-bottom: 20px;"></div>

<div class="container">
    <div class="row">
        <div class="col-8">

            <div>
                <a th:each="category:${categories}" style="margin: 10px;" class="btn btn-outline-primary" th:href="@{/toCategoryPage(categoryId=${category.categoryId})}">[[${category.categoryName}]]</a>
                <!--<a class="btn btn-outline-secondary">Secondary</a>-->
                <!--<a class="btn btn-outline-success">Success</a>-->
                <!--<a class="btn btn-outline-danger">Danger</a>-->
                <!--<a class="btn btn-outline-warning">Warning</a>-->
                <!--<a class="btn btn-outline-info">Info</a>-->
                <!--<a class="btn btn-outline-light">Light</a>-->
                <!--<a class="btn btn-outline-dark">Dark</a>-->
            </div>


            <hr>

            <div class="card mb-3" th:each="blog:${blogs}">
                <a th:href="@{/blog/{blogId}(blogId=${blog.blogId})}" style="text-decoration: none; color: #212529;">
                    <img th:src="@{/img/index/2.jpg}" class="card-img-top" alt="..." height="250">
                    <div class="card-body">
                        <h3 class="card-title" th:text="${blog.blogTitle}">标题</h3>
                        <p class="card-text" th:utext="${#strings.abbreviate(blog.blogContent, 80)}">内容</p>
                        <p class="card-text"><small class="text-muted"
                                                    th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}"></small>
                        </p>
                    </div>
                </a>
            </div>


        </div>
        <div class="col-4">

            <!--第一个右边栏 阅读量 后期排序 显示 5 个-->
            <h5>最热文章</h5>
            <ul class="list-group" th:each="blog, b:${blogsViews}">
                <a th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"
                   class="list-group-item d-flex justify-content-between align-items-center list-group-item-action"
                   th:if="${b.count <= 5}">
                    [[${#strings.abbreviate(blog.blogTitle, 12)}]]
                    <span class="badge badge-primary badge-pill">[[${blog.blogViews}]]</span>
                </a>
            </ul>

        </div>
    </div>
</div>


</body>
</html>